<template>
  <div>
    <ul class="week">
      <li
        class="week-li"
        v-for="(item, index) of weekList"
        :key="item.date"
      >
        <div class="active" v-show="item.isClock == 1">
          <img src="./img/ic_tk_mryl_dk@2x.png" alt="" />
          <span>已打卡</span>
        </div>
        <div
          class="week-div"
          :class="[item.isClock == 0 ? 'noclock' : 'isClock']"
        >
          {{ weeks[index] }}
        </div>
        <div class="year">
          {{ item.date }}
        </div>
      </li>
    </ul>

    <div class="week-contain">
      <ul class="cont-ul">
        <li class="cont-li" v-for="item of weekPaper" :key="item.id">
          <div class="sjname">
            <span>{{ item.sj_name }}</span>
            <span>{{ date }}</span>
          </div>
          <div class="sjbtn" @click="gopaper(item)">开始做题</div>
        </li>
      </ul>
      <!-- <div class="btn" @click="changePaper">再换一套</div> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dayData: {
      type: Object,
    },
    date: {
      type: String,
    },
    weekPaper:{
      type:Array
    },
     weekList:{
      type:Array
    }
  },
  data() {
    return {
      weeks: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日",
      ],
    };
  },
  mounted(){
    console.log(this.weekList,"www---www")
  },
  methods: {
    // 换一批
    changePaper(){
      this.$emit("changePaper")
    },
    gopaper(item) {
      sessionStorage.setItem("everyData",JSON.stringify(item))
      this.$emit("gopaper", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.week {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .week-li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 150px;
    height: 110px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    .week-div {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
    }
    .isClock {
      margin-bottom: 6px;
    }
    .noclock {
      margin-bottom: 14px;
    }
    .year {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(3, 3, 3, 0.5);
      line-height: 20px;
    }
    .active {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 13px;
      img {
        width: 16px;
        margin-right: 5px;
      }
      span {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6900;
        line-height: 20px;
      }
    }
  }
}
.week-contain {
  width: 1240px;
  // height: 628px;
  background: #ffffff;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding-bottom: 30px;
  .cont-ul {
    width: 100%;
    .cont-li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 87px;
      background: #fbfbfb;
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
      padding: 0 24px 0 30px;
      margin-top: 10px;
      .sjbtn {
        width: 100px;
        height: 36px;
        background: linear-gradient(348deg, #ff6900 0%, #ffab70 100%);
        box-shadow: 0px 1px 4px 0px #ff6900;
        border-radius: 18px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
      }
      .sjname {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        span:first-child {
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 22px;
          margin-bottom: 8px;
        }
        span:last-child {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(3, 3, 3, 0.5);
          line-height: 17px;
        }
      }
    }
  }
}
.btn {
  width: 254px;
  height: 46px;
  background: linear-gradient(270deg, #ff6900 0%, #ffab70 100%);
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
}
</style>